<template>
    <PopUps :bgIndex="1000"  :boxIndex="1001" widthMy='60%'  height-my="78%">
        <div class="popups-box">
            <div class="header">
                <div class="header-top">
                    <h3>{{ props.popTitle }}</h3>
                    <i class="iconfont icon-icon-cross-empty" @click="closePopUps"></i>
                </div>
                <div class="headerMain">
                    <el-form ref="formRef" :inline="true" :model="popUpsForm" :rules="rules" class="demo-form-inline">
                        <el-form-item :prop="item.name" :label="item.label" v-for="(item, index) in popUpsFormLabel"
                            :key="index" :style="{ 'min-width': `${item.minWidth}'!important'` }">
                            <!-- 输入框 -->
                            <div class="optionsInput">
                                <el-input v-model="popUpsForm[item.name]" clearable :disabled="item.disabled"
                                    v-if="!item.type || item.type == 'input'" />
                            </div>
                            <!-- 下拉选框 -->
                            <el-select v-model="popUpsForm[item.name]" clearable v-if="item.type == 'select'">
                                <el-option :label="item1.label" :value="item1.value" v-for="(item1, index) in item.client"
                                    :key="index" />
                            </el-select>
                            <!-- 日期选框 -->
                            <el-date-picker v-else-if="item.type == 'picker'" v-model="popUpsForm[item.name]" type="date"
                                placeholder="请输入日期" format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
                            <!-- 文本域 -->
                            <el-input v-model="popUpsForm[item.name]" type="textarea" v-else-if="item.type == 'textarea'" />
                        </el-form-item>
                    </el-form>
                    <div class="btn">
                        <el-button type="primary" @click="onSubmit(formRef)" class="submit">{{ props.popTitle.slice(0, 2)
                        }}</el-button>
                        <el-button type="primary" @click="closePopUps" class="reset">取消</el-button>
                    </div>
                </div>
            </div>
        </div>
    </PopUps>
</template>
<script setup>
import PopUps from '@/components/My/PopUps';
import { reactive, ref, defineEmits, defineProps ,onMounted} from 'vue'
import {createInsertWarehouse,updateWarehouseApi} from '@/api/inventory'
import { ElMessage, ElMessageBox } from 'element-plus';
const emit = defineEmits(['popUpsFlase'])
let props = defineProps(['popTitle', 'disabled','getWarehouseData','assignmentData'])

const formRef = ref(null)
// 表单
let popUpsForm = ref({
    warehouseId: '后台生成',      // 仓库编号
    responsiblePerson: '',      // 经办人
    creationTime: '',    // 新增日期
    warehouseName: '',      // 仓库名称
    responsiblePhone: '',       // 联系电话
    warehouseAddress: '',       // 仓库地址
    remarks: '',       // 备注
})
// 表单数据标题
let popUpsFormLabel = ref([
    {
        name: 'warehouseId',
        label: '仓库编号',
        disabled: true
    },

    {
        name: 'responsiblePerson',
        label: '经办人',
    },
    {
        name: 'creationTime',
        label: '新增日期',
        type: 'picker'
    },
    {
        name: 'warehouseName',
        label: '仓库名称',
    },
    {
        name: 'responsiblePhone',
        label: '联系电话',
    },
    {
        name: 'warehouseAddress',
        label: '仓库地址',
        type: 'textarea'
    },
    {
        name: 'remarks',
        label: '备注',
        type: 'textarea'
    },

])

// 入库信息校验
const rules = reactive({
    responsiblePerson: [
        {
            required: true,
            message: '经办人',
            trigger: 'change',
        }
    ],
    creationTime: [
        {
            required: true,
            message: '新增日期',
            trigger: 'change',
        }
    ],
    warehouseName: [
        {
            required: true,
            message: '仓库名称',
            trigger: 'change',
        }
    ],
    responsiblePhone: [
        {
            required: true,
            message: '联系电话',
            trigger: 'change',
        },
        {
            pattern: /^(?:(?:\+|00)86)?1[3-9]\d{9}$/, message: '手机号码格式不正确', trigger: 'blur'
        }
    ],
    warehouseAddress: [
        {
            required: true,
            message: '仓库地址',
            trigger: 'change',
        }
    ],
})

// 关闭
const closePopUps = () => {
    emit('popUpsFlase', false)
}

// 新增
const onSubmit = (formRef) => {
    ElMessageBox.confirm(
        '确认' + props.popTitle + '信息？',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'success',
        }
    ).then(async () => {
        if (!formRef) return
        await formRef.validate((valid) => {
            if (valid) {
                console.log(props.popTitle.slice(0, 2));
                // 发送新增接口请求
                if (props.popTitle.slice(0, 2) == '新增') {
                    popUpsForm.value.warehouseId = ''
                    let parasm = popUpsForm.value
                    createInsertWarehouse(parasm).then(res => {
                        popUpsForm.value.warehouseId = '后台生成'
                        if (res.code == 200) {
                            emit('getWarehouseData')
                            closePopUps()
                            ElMessage({
                                type: 'success',
                                message: res.msg,
                            })
                        }
                    })
                }else if(props.popTitle.slice(0, 2) == '修改'){
                    let parasm = popUpsForm.value
                    updateWarehouseApi(parasm).then(res => {
                        if (res.code == 200) {
                            emit('getWarehouseData')
                            closePopUps()
                            ElMessage({
                                type: 'success',
                                message: res.msg,
                            })
                        }
                    })
                }
            } 
        })
    })
}

// 数据回显
const assignmentFun = () => {
    popUpsForm.value = props.assignmentData[0]
}
onMounted(()=>{
    if(props.assignmentData[0]){
        assignmentFun()
    }
})
</script>

<style lang="scss" scoped>
.demo-form-inline .el-select {
    --el-select-width: 220px;
}

.form-inline {
    :deep(.el-form-item__label) {
        width: 80px;
    }

    :deep(.el-form-item) {
        width: 190px;
    }
}

.el-input__wrapper {
    --el-select-width: 220px;
}

:deep(.el-form-item) {
    width: 220px !important;
}

:deep(.el-form-item__label) {
    width: 120px;
    text-align: right;
}

:deep(.el-textarea__inner) {
    width: 180px;
}

.optionsInput {
    display: flex;

    .btn {
        background-color: #829BFF;
        color: #fff;
    }
}

@mixin publicH3 {
    font-weight: 550;
    position: relative;
    font-size: 16px !important;

    &::after {
        content: '';
        width: 5px;
        height: 20px;
        background-color: #1947FF;
        border-radius: 5px;
        position: absolute;
        left: -15px;
        top: -2px;
    }
}

@mixin titlePadding {
    padding: 25px 25px 25px 45px;
}

@mixin pubilcForm {
    :deep(.el-form-item) {
        margin-right: 30px !important;
    }

    :deep(.el-form-item__label) {
        font-size: 14px;
    }

    :deep(.el-input__wrapper) {
        width: 132px;
    }

    :deep(.el-date-editor--datetimerange) {
        width: 240px;
    }

    :deep(.el-table .el-table__header-wrapper th, .el-table .el-table__fixed-header-wrapper th) {
        font-size: 15px !important;
    }
}

.popups-box {

    .header {
        .header-top {
            @include titlePadding;
            display: flex;
            align-items: center;
            justify-content: space-between;
            position: sticky;
            top: 0px;
            background: #FFF;
            z-index: 2024;
            h3 {
                @include publicH3;
            }

            .iconfont {
                color: #666;
                font-size: 27px;
            }
        }

        .headerMain {
            .demo-form-inline {
                @include pubilcForm;
            }

            .btn {
                margin-top: 40px;
                padding-right: 50px;
                text-align: right;

                .el-button {
                    width: 50px;
                    height: 25px;
                    font-size: 12px;
                }

                .reset {
                    background-color: #E4E9FC;
                    color: #333;
                    border: none;
                }
            }
        }
    }

}</style>